<!DOCTYPE html>
<html lang="en">
<head>
	<meta charset="UTF-8">
	<title>Document</title>
	<style>
		*{
			margin: 0;
			padding: 0;
		}
		li{
			list-style: none;
		}
		#wrapper{
			border: 1px solid red;
			width: 450px;
			height: 415px;
			overflow: hidden;
			position: relative;
		}
		ul li{
			line-height: 50px;
			height: 50px;
			border: 1px solid pink;
			border-radius: 8px;
		}
		ul li img{
			margin-left: 10px;
			height: 100%;
			float: left;
		}
		.down{
			position: absolute;
			top: 0;
			width: 100%;
			font-size: 13px;
			text-align: center;
			line-height: 25px;
		}
		.up{
			position: absolute;
			bottom: 0;
			width: 100%;
			font-size: 13px;
			text-align: center;
			line-height: 25px;
		}
	</style>
</head>
<body>
	<div id="wrapper" class="wrapper">
		<ul class="content">
			<li>
				<img src="m_70.jpg">
				<p>啦啦啦啦啦啦啦啦啦啦啦啦啦啦鲁</p>
			</li>
			<li>
				<img src="m_70.jpg">
				<p>啦啦啦啦啦啦啦啦啦啦啦啦啦啦鲁</p>
			</li>
			<li>
				<img src="m_70.jpg">
				<p>啦啦啦啦啦啦啦啦啦啦啦啦啦啦鲁</p>
			</li>
			<li>
				<img src="m_70.jpg">
				<p>啦啦啦啦啦啦啦啦啦啦啦啦啦啦鲁</p>
			</li>
			<li>
				<img src="m_70.jpg">
				<p>啦啦啦啦啦啦啦啦啦啦啦啦啦啦鲁</p>
			</li>
			<li>
				<img src="m_70.jpg">
				<p>啦啦啦啦啦啦啦啦啦啦啦啦啦啦鲁</p>
			</li>
			<li>
				<img src="m_70.jpg">
				<p>啦啦啦啦啦啦啦啦啦啦啦啦啦啦鲁</p>
			</li>
			<li>
				<img src="m_70.jpg">
				<p>啦啦啦啦啦啦啦啦啦啦啦啦啦啦鲁</p>
			</li>
			<li>
				<img src="m_70.jpg">
				<p>啦啦啦啦啦啦啦啦啦啦啦啦啦啦鲁</p>
			</li>
			<li>
				<img src="m_70.jpg">
				<p>啦啦啦啦啦啦啦啦啦啦啦啦啦啦鲁</p>
			</li>
		</ul>
		<div class="up">加载更多</div>
		<div class="down">刷新数据</div>
	</div>
	<script src="../lib/better-scroll/bscroll.min.js"></script>
	<script src=""></script>	
	<script>
		var wrapper = document.querySelector('.wrapper');
		var content = document.querySelector('.content')
		var up = document.querySelector('.up')
		var down = document.querySelector('.down')
		var bs = new BScroll(wrapper,{
			scrollbar: {//滚动条
				fade: true,
				interactive: false
			},
			pullDownRefresh: {//下拉刷新
			  	threshold: 50,
			  	stop: 50
			},
			pullUpLoad: {//上拉加载
			    threshold: 20
			}
		})

		bs.on('pullingDown',function(){
			down.innerHTML='加载中。。。'
			setTimeout(function(){
				var str='';
				for(var i=0;i<10;i++){
					str+='<li><img src="m_70.jpg"><p>刷新'+i+'</p></li>'
				}
				content.innerHTML=str;
				down.innerHTML='刷新数据'
				bs.finishPullDown();
				bs.refresh();
			},2000)
		})

		bs.on('pullingUp',function(){
			up.innerHTML='加载中。。。'
			setTimeout(function(){
				var str='';
				for(var i=10;i>0;i--){
					str+='<li><img src="m_70.jpg"><p>刷新'+i+'</p></li>'
				}
				content.innerHTML=str;
				up.innerHTML='加载完成'
				bs.finishPullUp();
				bs.refresh();
			},2000)
		})
		
		bs.on('scroll',function(){
			/*console.log(bs.x,bs.y)*/
			down.style.top=bs.y-50+'px'
		})
	</script>
</body>
</html>